<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 使用下载到本地的redux源码 -->
  <script src="./redux.js"></script>
</head>

<body>
  <!-- 1. 定义一个 reducer 函数 （根据当前想要做的修改返回一个新的状态）
  2. 使用createStore方法传入 reducer函数 生成一个store实例对象
  3. 使用store实例的 subscribe方法 订阅数据的变化（数据一旦变化，可以得到通知）
  4. 使用store实例的 dispatch方法提交action对象 触发数据变化（告诉reducer你想怎么改数据）
  5. 使用store实例的 getState方法 获取最新的状态数据更新到视图中 -->

  <!-- redux是一个独立的组件，他可以不依赖于任何框架自己运行 -->
  <button id="decrement">-</button>
  <span id="count">0</span>
  <button id="increment">+</button>
  <script>
    // 定义reducer函数 
    // 内部主要的工作是根据不同的action 返回不同的state
    function counterReducer (state = { count: 0 }, action) {
      switch (action.type) {
        case 'INCREMENT':
          return { count: state.count + 1 }
        case 'DECREMENT':
          return { count: state.count - 1 }
        default:
          return state
      }
    }
    // 使用reducer函数生成store实例
    const store = Redux.createStore(counterReducer)

    // 订阅数据变化
    store.subscribe(() => {
      console.log(store.getState())
      document.getElementById('count').innerText = store.getState().count

    })
    // 增
    const inBtn = document.getElementById('increment')
    inBtn.addEventListener('click', () => {
      store.dispatch({
        type: 'INCREMENT'
      })
    })
    // 减
    const dBtn = document.getElementById('decrement')
    dBtn.addEventListener('click', () => {
      store.dispatch({
        type: 'DECREMENT'
      })
    })
  </script>
</body>

</html>